/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {Image, StyleSheet} from 'react-native';
import {StackNavigator, TabNavigator} from 'react-navigation';
import Details from './page/Details';
import Video from './page/item_page/Video';
import Media from './page/item_page/Media';
import Self from './page/item_page/Self';
import Information from './page/children_page/Information'
import Glimpse from './page/children_page/Glimpse'
import Watch from './page/children_page/Watch'
import Login from "./page/Login";
// const instructions = Platform.select({
//   ios: 'Press Cmd+R to reload,\n' +
//     'Cmd+D or shake for dev menu',
//   android: 'Double tap R on your keyboard to reload,\n' +
//     'Shake or press menu button for dev menu',
// });
const Tab = TabNavigator({
  Information:{
    screen:Information,
    navigationOptions:({navigation})=>({
      tabBarLabel:'师大要闻',
    }),
  },
  Glimpse:{
    screen:Glimpse,
    navigationOptions:({navigation})=>({
      tabBarLabel:'师大掠影',
    }),
  },
  Watch:{
    screen:Watch,
    navigationOptions:({navigation})=>({
      tabBarLabel:'师大观澜',
    }),
  },
},{
  tabBarPosition: 'top',
  lazy: true, // 是否懒加载
  animationEnabled: false,
  initialRouteName: 'Information',
  tabBarOptions:{
    style: {  
      backgroundColor: '#ffffff',  
      height:50
    },  
    labelStyle: {  
      fontSize: 16, 
      fontWeight:'bold',
      fontFamily:'scratchmyback'
    }, 
    activeTintColor: '#AC1E1A',//label和icon的前景色 活跃状态下（选中）
    inactiveTintColor: '#000000',//label和icon的前景色 活跃状态下（未选中）
    indicatorStyle: {//标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题
      backgroundColor: '#AC1E1A',
      width:40,
      marginLeft:30
    },
    tabStyle:{
      width:100,
      height:50
    },
    scrollEnabled:true,
  }  
});

const BottomTab = TabNavigator({
  Tab: {
    screen: Tab,
    navigationOptions: {
      tabBarLabel: '资讯',
      tabBarIcon: ({ focused, tintColor }) => <Image
        style={styles.tabBarImage}
        source={focused ? require("./image/icon_news.png") : require("./image/icon_news_no.png")} />,
    }
  },
  Video: {
    screen: Video,
    navigationOptions: {
      tabBarLabel: '师大影像',
      tabBarIcon: ({ focused, tintColor }) => <Image
        style={styles.tabBarImage}
        source={focused ? require("./image/icon_video.png") : require("./image/icon_video_no.png")} />,
    }
  },
  Media: {
    screen: Media,
    navigationOptions: {
      tabBarLabel: '媒体师大',
      tabBarIcon: ({ focused, tintColor }) => <Image
        style={{width:30,height:20}}
        source={focused ? require("./image/icon_media.png") : require("./image/icon_media_no.png")} />,
    }
  },
  Self: {
    screen: Self,
    navigationOptions: {
      tabBarLabel: '我的',
      tabBarIcon: ({ focused, tintColor }) => <Image
        style={styles.tabBarImage}
        source={focused ? require("./image/icon_my.png") : require("./image/icon_my_no.png")} />,
    }
  }
}, {
  tabBarOptions: {
    activeTintColor: '#AC1E1A',
    inactiveTintColor: '#999999',
    showIcon: true,
    showLabel: true,
    upperCaseLabel: false,
    pressColor: '#AC1E1A',
    pressOpacity: 0.8,
    style: {
      backgroundColor: '#fff',
      paddingBottom: 0,
      borderTopWidth: 0.5,
      borderTopColor: '#ccc',
    },
    labelStyle: {
      fontSize: 12,
      margin: 1
    },
    indicatorStyle: { height: 0 }, //android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了
  },
  tabBarPosition: 'bottom',
  swipeEnabled: false,
  animationEnabled: false,
  lazy: true,
  backBehavior: 'none',
  });

const Navigator = StackNavigator(
  {
      BottomTab: { screen: BottomTab },
      Details: { screen: Details },
      Login: { screen: Login },
  }, {
    initialRouteName: 'BottomTab',
    mode: 'card',
    headerMode:'none',
  });
export default class App extends Component {
  render() {
    return (
      <Navigator />
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  tabText: {
    color: '#999999',
    fontSize: 10
  },
  selectedTabText: {
    color: '#AC1E1A'
  },
  instructions: {
    textAlign: 'center',
    color: '#FF0000',
    marginBottom: 5,
  },
  tabBarImage: {
    width: 20,
    height: 20
  }
});

